import { NextPage } from 'next';
import Image from 'next/image';
import Link from 'next/link';

import { Card, Text } from '@radix-ui/themes';

import { ProgressiveImage } from '@/components/progressive-image';
import { Wrapper } from '@/components/wrapper';

import { Short, getShort } from '@/api/shorts';

// import type { Metadata } from 'next';

// export const metadata: Metadata = {
//     title: '姚利锋 | 片段',
//     description: '姚利锋 | 片段'
// };
export const revalidate = 60;

const Page: NextPage = async () => {
    const shorts = await getShort();

    return (
        <Wrapper className="flex flex-col px-6 pb-24 pt-8">
            <div className="mb-8">
                <h2 className="text-3xl font-bold text-foreground md:text-4xl mb-3">最新片段</h2>
            </div>
            <div className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-6 space-y-6">
                {shorts.map((short: any) => (
                    <ShortItem key={short.id} short={short} />
                ))}
            </div>
        </Wrapper>
    );
};

function ShortItem({ short }: { short: Short }) {
    return (
        <div className="break-inside-avoid mb-6">
            <Card
                size="1"
                className="group border-0 bg-background/50 backdrop-blur-sm rounded-xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 sm:border border-[#18181b] border-border/60"
            >
                <Link href={`/shorts/${short.slug}`} className="block">
                    <div className="relative overflow-hidden">
                        <Image
                            src={short.url}
                            alt={short.title}
                            width={300}
                            height={200}
                            className="w-full h-auto object-cover transition-transform duration-300 group-hover:scale-105"
                        />
                        <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                    </div>
                    <div className="p-4">
                        <Text
                            as="p"
                            size="3"
                            className="text-foreground/90 leading-relaxed font-medium group-hover:text-foreground transition-colors duration-200"
                        >
                            {short.title || short.description}
                        </Text>
                    </div>
                </Link>
            </Card>
        </div>
    );
}

export default Page;
